<template>
    <div class="player_list">
        <div class="title_p">
            <p>播放列表</p>
        </div>
        <div class="palyList">
            <table cellspacing="0">
                <thead>
                    <th></th>
                    <th>操作</th>
                    <th>音乐标题</th>
                    <th>歌手</th>
                    <th>专辑</th>
                    <th>时长</th>
                </thead>
                <tr v-for="(item,i) in musiclist" :key="item.id" @dblclick="playCurrent(i)" :class="{backColor:i===currentIndex}">
                    <td>
                        <div class="ctrl1" v-show="currentIndex===i">
                            <img src="../../../assets/M_redio/currentplay.png" alt="">
                        </div>
                    </td>
                    <td>
                        <div class="ctrl2">
                            <img alt="" :src="heartSrc(i)" class="live" :id="'live'+i" @click.stop="heart_music(i)">
                            <img src="../../../assets/M_nav/download.png" alt="" class="xiazai">
                        </div>
                    </td>
                    <td>{{item.sing_name}}</td>
                    <td>{{item.singer}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.duration}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isheart: false,
            heartSrc: function(i){
                for(var j=0;j<this.musiclist[i].musicSheet.length;j++){
                    if(this.musiclist[i].musicSheet[j] === "我喜欢的音乐"){
                        return require('../../../assets/M_redio/live1.png');
                        break;
                    }else{
                        return require('../../../assets/M_redio/live.png');
                    }
                } 
            },
        }
    },
    methods: {
        heart_music(index){
            var el = document.getElementById('live'+index);
            var isheart=false;
            for(var j=0;j<this.musiclist[index].musicSheet.length;j++){
                if(this.musiclist[index].musicSheet[j] === "我喜欢的音乐"){
                    el.src = require('../../../assets/M_redio/live.png');
                    this.$emit( "deleteheart", index );
                    isheart = true;
                    break;
                }
            }
            if(!isheart){
                el.src = require('../../../assets/M_redio/live1.png');
                this.$emit( "playheart", index );
            }
        },
        playCurrent(musicIndex){
            this.$emit('playCurrentMusic', musicIndex);
        }
    },
    components:{

    },
    props: ['musiclist', 'currentIndex']
}
</script>

<style>
.player_list{ width:520px; height: 520px; background: #191b1f; box-shadow: 0 0 1px #fff; border-radius: 5px; }
.title_p{
    padding: 8px; 
    border-bottom: 1px solid #404245;
} /* #b82525 */
.title_p p{
    /* height: 32px; */
    line-height: 20px;
    font-size: 16px;
}

.palyList table{
    width: 100%;
}

.palyList thead{
    background-color: rgba(0, 0, 0, 50%);
}
.palyList th{
    height: 30px;
    color: white;
    font-size: 14px;
}
.palyList tr{
    height: 30px;
    text-align: center;   
    cursor: pointer;
}

.palyList tr.backColor{
    background-color: rgba(0, 0, 0, 50%);
}

.palyList tr:hover{
    background-color: rgba(0, 0, 0, 50%);
}

.palyList td{
    font-size: 14px;
}

.ctrl1 img{ 
    width: 20px; 
    height: 20px; 
}


.ctrl2 {
    display: flex;
    justify-content: center;
}

.ctrl2 img{
    width: 26px; 
    height: 26px;
    cursor: pointer;
}
</style>